import React, { useEffect, useState } from 'react'
import {View, ScrollView, Image,Input} from '@tarojs/components'
import BottomNavigation from '../../components/BottomNavigation/BottomNavigation'
import Waterfall, { ImageItem } from '../../components/Waterfall/Waterfall'
import useNavBarInfo from '@/hook/useNavBarInfo'
import Taro from '@tarojs/taro'
import './index.scss'

const COLUMN_COUNT = 2

interface TypeProps {
  data: { name: string; index: number; checked: number }[]
  top?: number
}

const Type: React.FC<TypeProps> = ({ data, top = 0 }) => {
  return (
    <View
      className="community-type-box"
      style={{
        top: `${top}rpx`
      }}
    >
      {data.map((item, index) => (
        <View
          key={index}
          className={
            item.checked !== 1 ? 'community-type-item' : 'community-type-item-checked'
          }
        >
          <View className="community-type-title">{item.name}</View>
        </View>
      ))}
    </View>
  )
}

const Index: React.FC = () => {
  const navBarInfo = useNavBarInfo()
  const [selectedIndex, setSelectedIndex] = useState(0)

  // 瀑布流数据
  const [columns, setColumns] = useState<ImageItem[][]>(
    Array.from({ length: COLUMN_COUNT }, () => [])
  )
  const [heights, setHeights] = useState<number[]>(Array(COLUMN_COUNT).fill(0))

  const generateMockImages = (): ImageItem[] =>
    new Array(10).fill(0).map((_, i) => {
      const height = 300 + Math.floor(Math.random() * 200)
      return {
        id: Date.now() + i,
        url: `https://picsum.photos/300/${height}?random=${Math.random()}`,
        height,
        name: '用户' + i,
        goods: '白酒' + i,
        num: 1,
        like: 1
      }
    })

  const loadImages = () => {
    const newImages = generateMockImages()
    const newCols = [...columns]
    const newHeights = [...heights]

    newImages.forEach((img) => {
      const minIndex = newHeights.indexOf(Math.min(...newHeights))
      newCols[minIndex].push(img)
      newHeights[minIndex] += img.height
    })

    setColumns(newCols)
    setHeights(newHeights)
  }

  useEffect(() => {
    loadImages()
  }, [])

  const typeList = [
    { name: '关注', index: 0, checked: 1 },
    { name: '北京', index: 1, checked: 0 },
    { name: '图文', index: 2, checked: 0 },
    { name: '视频', index: 3, checked: 0 }
  ]

  return (
    <View className="community-page">
      {/* 顶部自定义导航栏 */}
      <View
        className="user-bar"
        style={{
          paddingTop: `${navBarInfo.statusBarHeightRpx - 30}rpx`,
          height: `${navBarInfo.totalHeightRpx}rpx`
        }}
      >
        <Image className="logo" src={require(`../../assets/logo.png`)}></Image>
        <View className="logo-box">
          <Input placeholder="请输入搜索关键词"></Input>
          <View className="search-box">
            <Image className="search" src={require(`../../assets/home/search.png`)}></Image>
          </View>
        </View>

      </View>

      {/* 分类条 */}
      <Type data={typeList} top={navBarInfo.totalHeightRpx} />

      {/* 瀑布流滚动区 */}
      <ScrollView
        scrollY
        className="waterfall-container"
        onScrollToLower={() => {
          Taro.showLoading({ title: '加载中...' })
          setTimeout(() => {
            loadImages()
            Taro.hideLoading()
          }, 1000)
        }}
        lowerThreshold={100}
      >
        <View style={{height:`80rpx`}}></View>
        <Waterfall  columns={columns}
          style={{
            paddingTop: `${navBarInfo.statusBarHeightRpx - 30}rpx`,
            height: `${navBarInfo.totalHeightRpx}rpx`
          }}
        />
      </ScrollView>

      {/* 底部导航 */}
      <BottomNavigation selectedIndex={selectedIndex} onTabChange={setSelectedIndex} />
    </View>
  )
}

export default Index
